﻿<!doctype html>
<html id="homePageHtml">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="homepage/js/jquery.js"></script>
    <link rel="stylesheet" href="homepage/css/comon0.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="道路智慧养护决策平台">
    <meta name="keywords" content="道路智慧养护决策平台">
    <title>道路智慧养护决策平台首页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-select.min.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="fonts/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/dataTime.css"/>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 19.2 + 'px';
    </script>
    <link rel="stylesheet" href="homepage/css/index.css">
    <script src="js/baseUrl.js"></script>
    <link rel="stylesheet" href="css/calendar.css">
</head>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 20})
        });
    });
</script>
<script type="text/javascript" src="homepage/js/echarts.min.js"></script>

<body>
<div class="canvas" style="opacity: .2;margin-top: 110px">
    <iframe frameborder="0" src="homepage/js/canvas.html" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
    <div class="loadbox"><img src="homepage/picture/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
    <div class="row topBg" style="z-index: 999">
        <div class="text-left widauto" style="float: left">
            <div class="show-time" id="topTab">
                <a href="javascript:void(0)" class="homePage curr"></a>
                <a href="index.html" class="gis"></a>
                <a href="bigscreen/bim_example/index.html" class="bim"></a>
            </div>
        </div>
        <div class="" style="width: 50%;margin: 0 auto;margin-top: 0.3rem;;">
            <div class="bigTile"></div>
        </div>
        <div class="rightPart" style="float: right">
            <div class="layui-inline calendar">
                <div class="layui-inline">
                    <input type="text" class="layui-input test-item" id="startInput" placeholder="开始时间">
                </div>
                -
                <div class="layui-inline">
                    <input type="text" class="layui-input test-item" id="endInput" placeholder="结束时间">
                </div>
            </div>

            <!-- 暂时屏蔽中联国际logo -->
            <img data-toggle="modal" data-target="" src="img/红白logo.png" title="logo"/>
        </div>
    </div>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall basicsDiv">
                <div class="data-title">
                    <b class="data-title-left fl">[</b>
                    <span>基础设施</span>
                    <b class="data-title-right fr">]</b>
                </div>

                <div class="basicsPart">
                    <div class="row het13vh">
                        <div class="layui-col-md1 layui-col-xs1 layui-col-sm1 layui-col-lg1">
                            <img src="homepage/images/u13.png" class="roadIcon">

                        </div>
                        <div class="layui-col-md11 layui-col-xs11 layui-col-sm11 layui-col-lg11">
                            <div class="row">
                                <div class="layui-col-md4 layui-col-xs4 layui-col-sm4 layui-col-lg4">
                                    道路里程
                                    <div id="roadLength" class="blueSpan">0公里</div>
                                </div>
                                <div class="layui-col-md4 layui-col-xs4 layui-col-sm4 layui-col-lg4">
                                    道路数量
                                    <div id="roadNum" class="blueSpan">0条</div>
                                </div>
                                <div class="layui-col-md4 layui-col-xs4 layui-col-sm4 layui-col-lg4">
                                    路段数量
                                    <div id="roadSectionNum" class="blueSpan">0条</div>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="row het13vh">
                        <div class="layui-col-md1 layui-col-xs1 layui-col-sm1 layui-col-lg1">
                            <img src="homepage/images/u18.png" class="roadIcon">
                        </div>
                        <div class="layui-col-md11 layui-col-xs11 layui-col-sm11 layui-col-lg11">
                            <div class="row">
                                <div class="layui-col-md4 layui-col-xs4 layui-col-sm4 layui-col-lg4">
                                    桥梁数量
                                    <div id="bridgeNum" class="blueSpan">0座</div>
                                </div>
                                <div class="layui-col-md8 layui-col-xs8 layui-col-sm8 layui-col-lg8 het33">
                                    <div class="allnav" id="roadEcahrt"></div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row het13vh">
                        <div class="layui-col-md1 layui-col-xs1 layui-col-sm1 layui-col-lg1">
                            <img src="homepage/images/u23.png" class="roadIcon">
                        </div>
                        <div class="layui-col-md11 layui-col-xs11 layui-col-sm11 layui-col-lg11">
                            <div class="row">
                                <div class="layui-col-md4 layui-col-xs4 layui-col-sm4 layui-col-lg4">
                                    隧道数量
                                    <div id="tunnelNum" class="blueSpan">0座</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="boxfoot"></div>
            </div>
            <div class="boxall basicsList">
                <div class="data-title">
                    <b class="data-title-left fl">[</b>
                    <span>附属设施</span>
                    <b class="data-title-right fr">]</b>
                </div>
<!--                <div class="alltitle">附属设施</div>-->
                <ul class="subUl">
                    <li>
                        <img src="img/imag1001.png">
                        <div class="rDiv">
                            井盖数量
                            <div>0座</div>
                        </div>
                    </li>

                </ul>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="certDiv">
                <ul>
                    <li class="" style="width: 45%;padding-right: 0.1rem">
                        <div class="boxall" style="height: 30vh;">
                            <div class="data-title">
                                <b class="data-title-left fl">[</b>
                                <span>设施病害</span>
                                <b class="data-title-right fr">]</b>
                            </div>
<!--                            <div class="alltitle">设施病害</div>-->
                            <table class="diseaseTable">
                                <tr>
                                    <td>
                                        <img src="img/s-d.png">
                                        道路病害
                                    </td>
                                    <td class="blueSpan roadNum">0个</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="img/s-q.png">
                                        桥梁病害
                                    </td>
                                    <td class="blueSpan bridgeNum">0个</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="img/s-sd.png">
                                        隧道病害
                                    </td>
                                    <td class="blueSpan tunelNum">0个</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="img/s-j.png">
                                        井盖病害
                                    </td>
                                    <td class="blueSpan wellNum">0个</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="img/s-j.png">
                                        雨水口病害
                                    </td>
                                    <td class="blueSpan gutterNum">0个</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="img/s-w.png">
                                        开挖监管
                                    </td>
                                    <td class="blueSpan excavatNum">0个</td>
                                </tr>
                            </table>

                            <div class="boxfoot"></div>
                        </div>
                        <div class="boxall" style="height: 10vh">
                            <div class="data-title">
                                <b class="data-title-left fl">[</b>
                                <span>保障线路</span>
                                <b class="data-title-right fr">]</b>
                            </div>
<!--                            <div class="alltitle">保障线路</div>-->
                            <table class="safeTable">
                                <tr>
                                    <td>
                                        <img src="img/b-z.png">
                                        保障线路
                                    </td>
                                    <td class="blueSpan guarant">0条</td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="img/b-x.png">
                                        线路病害
                                    </td>
                                    <td class="blueSpan damage">0个</td>
                                </tr>
                            </table>
                            <div class="boxfoot"></div>
                        </div>

                    </li>
                    <li class="" style="width: 55%">
                        <div class="boxall" style="height: 20vh;">
                            <div class="data-title">
                                <b class="data-title-left fl">[</b>
                                <span>病害处置</span>
                                <b class="data-title-right fr">]</b>
                            </div>
<!--                            <div class="alltitle">病害处置</div>-->
                            <div class="allnav" id="echartSafe"></div>
                            <div class="boxfoot"></div>

                        </div>
                        <div class="boxall" style="height: 20vh">
                            <div class="data-title">
                                <b class="data-title-left fl">[</b>
                                <span>病害预结算</span>
                                <b class="data-title-right fr">]</b>
                            </div>
<!--                            <div class="alltitle">病害预结算</div>-->
                            <div class="allnav" id="echart2"></div>
                            <div class="boxfoot"></div>
                        </div>

                    </li>
                </ul>

            </div>

            <div class="boxall" style="height: 41vh;clear: both;float: left;width: 100%">
                    <!--                <div class="alltitle">附属设施</div>-->
<!--                    <div class="data-title">-->
<!--                        <b class="data-title-left fl">[</b>-->
<!--                        <span>附属设施</span>-->
<!--                        <b class="data-title-right fr">]</b>-->
<!--                    </div>-->
                    <!--                <div class="allnav" id="echart2">     </div>-->
                    <div class="layui-tab">

                        <ul class="layui-tab-title">
                            <!--                <li class=" new">数据获取</li>-->
                            <li class="layui-this tab">道路病害</li>
                            <li class="tab">桥梁病害</li>
                            <li class="tab">隧道病害</li>
                            <li class="tab">井盖病害</li>
                            <li class="tab">雨水口病害</li>
                            <li class="tab">开挖监管</li>
                        </ul>
                        <div class="layui-tab-content">
                            <!--                道路病害-->
                            <div class="layui-tab-item layui-show">
                                <div class="list">
                                    <div class="listTable">
                                        <table class="layui-hide" id="roadTable"></table>
                                    </div>
                                </div>

                            </div>
                            <!--         桥梁病害       -->
                            <div class="layui-tab-item">
                                <div class="listTable">
                                    <table class="layui-hide" id="bridgeTable"></table>
                                </div>
                            </div>
                            <!--          隧道病害      -->
                            <div class="layui-tab-item">

                                <div class="listTable">
                                    <table class="layui-hide" id="tunnelTable"></table>
                                </div>
                            </div>
                            <!--             井盖病害   -->
                            <div class="layui-tab-item">

                                <div class="listTable">
                                    <table class="layui-hide" id="wellTable"></table>
                                </div>
                            </div>
                            <!--             雨水口病害   -->
                            <div class="layui-tab-item">

                                <div class="listTable">
                                    <table class="layui-hide" id="rainTable"></table>
                                </div>
                            </div>
                            <!--           开挖监管     -->
                            <div class="layui-tab-item">

                                <div class="listTable">
                                    <table class="layui-hide" id="excavateTable" lay-even="" lay-skin="row"></table>
                                </div>
                            </div>
                        </div>
                    </div>

                <div class="boxfoot"></div>

            </div>


        </li>
        <li>
            <div class="boxall" style="height:9vh">
<!--                <div class="alltitle">在岗人员车辆</div>-->
                <div class="data-title">
                    <b class="data-title-left fl">[</b>
                    <span>在岗人员车辆</span>
                    <b class="data-title-right fr">]</b>
                </div>
                <table class="personTable">
                    <tr>
                        <td>
                            <img src="homepage/images/u100.svg" style="width: 12px">
                            员工
                            <span class="blueSpan ml10" id="person">0人</span>
                        </td>
                        <td>
                            <img src="homepage/images/u104.svg">
                            车辆
                            <span class="blueSpan ml10" id="car">0辆</span>
                        </td>
                    </tr>
                </table>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height:31vh">
<!--                <div class="alltitle">视频监控</div>-->

                <div class="data-title">
                    <b class="data-title-left fl">[</b>
                    <span>视频监控</span>
                    <b class="data-title-right fr">]</b>
                </div>
                <form class="layui-form selInput" action="">
                    <div>
                        <select lay-filter="videoSelect" class="selectType" id="videoSelect">

                        </select>
                    </div>
                </form>
                <div class="videoDiv">
                    <iframe class="videoIframe" src=" "
                            style="border: none;width: 100%"></iframe>
                </div>
                <div class="boxfoot"></div>

            </div>
            <div class="boxall" style="height: 16vh">
<!--                <div class="alltitle">在线监测</div>-->
                <div class="data-title">
                    <b class="data-title-left fl">[</b>
                    <span>在线监测</span>
                    <b class="data-title-right fr">]</b>
                </div>
                <form class="layui-form selInput" action="">
                    <div>
                        <select lay-filter="onlineSelect" id="onlineSelect" class="selectType">

                        </select>
                        <table class="onlineTable">
                            <tr>
                                <td><img src="homepage/images/u133.png"><span class="contSpan">正常<span
                                        class="blueSpan ml10" id="nomalNum">0个</span></span></td>
                                <td><img src="homepage/images/u138.png"><span class="contSpan">告警<span
                                        class="blueSpan ml10" id="warnNum">0个</span></span></td>
                                <td><img src="homepage/images/u137.png"><span class="contSpan">离线<span
                                        class="blueSpan ml10" id="offlineNum">0个</span></span></td>
                            </tr>
                        </table>
                    </div>
                </form>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 23vh;z-index: 1">
<!--                <div class="alltitle">应急事件</div>-->

                <div class="data-title">
                    <b class="data-title-left fl">[</b>
                    <span>应急事件</span>
                    <b class="data-title-right fr">]</b>
                </div>
                <div class="allnav" id="mergEchart"></div>
                <div class="boxfoot"></div>

            </div>
        </li>
    </ul>
</div>
<div class="back"></div>


<!--<script type="text/javascript" src="js/area_echarts.js"></script>-->

<!--<script src="../layui/layui.all.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js"></script>
<!--<script src="js/click.js"></script>-->
<script src="homepage/js/homeCalendar.js"></script>
<script language="JavaScript" src="homepage/js/homepage.js"></script>
</body>
</html>
